<template>
  <div class="shop">
   <div class="like">
         <h2>猜你喜欢</h2>
        <ul class="sorting">
            <li 
                v-for="(item,index) in sorting" :key="index" 
                @click="jump(index)"
                :class="{active : currentIndex == index}"
            >
                {{item}}
            </li>
        </ul>
        <ul class="label">
            <li v-for="(item,index) in label" :key="index">{{item}}</li>
        </ul>
   </div>
   <div class="shoplist" v-for="(item,index) in shoplist" :key="index" @click="$router.push('/detail/'+item.mtWmPoiId)">
    <div class="imgBox">
        <img v-lazy="item.picUrl" alt="">
    </div>
    <div class="text">
        <h2>{{item.name}}</h2>
        <div class="score">
            <van-icon name="star" />
            <span>{{item.wmPoiScore/10}}</span> 
            <span>{{item.monthSalesTip}}</span>
        </div>
        <div class="send">
            <span>
                {{item.minPriceTip}} {{item.shippingFeeTip}}
            </span>
            <span>
                {{item.deliveryTimeTip}} {{item.distance}}
            </span>
        </div>
        <div class="evaluation">
            <span>
                {{item.averagePriceTip}}
            </span>
        </div>
        <div class="coupons">
            <span v-for="(v,i) in item.discounts2" :key="i">{{v.info}}</span>
        </div>
    </div>
   </div>
  </div>
</template>

<script>
import { shop } from '@/utils/api'
export default {
    data(){
        return{
            currentIndex:0,
            sorting:['综合排序','评分最高','销量最高','筛选'],
            label:['年货节热卖','津贴联盟','满减优惠','品质联盟'],
            shoplist:[],
            boole:true,
        }
    },
    mounted(){
        shop().then((res)=>{
            console.log(res.data.list);
            this.shoplist = res.data.list
        })
    },
    methods: {
      jump(index){
        this.currentIndex = index;
        if(index == 1){
            if( this.bool ) {
                this.shoplist.sort((a,b)=>{
                    return a.wmPoiScore - b.wmPoiScore
                })
                this.bool = false
            } else{
                this.shoplist.sort((a,b)=>{
                    return b.wmPoiScore - a.wmPoiScore
                })
                this.bool = true
            }
        }
      }  
    },

}
</script>

<style scoped lang="scss">
.shop{
    margin: .2667rem;
    .like{
        h2{
            font-size: .5867rem;
        }
        .sorting{
            display: flex;
            justify-content: space-between;
            li{
                font-size: .48rem;
                margin: .2667rem 0;
            }
        }
        .label{
            display: flex;
            justify-content: space-between;
            li{
                font-size: .3733rem;
                background-color: #eee;
                padding: .2133rem .2667rem;
                border-radius: .1333rem;
                margin: .2667rem 0;
            }
        }
    }
    .shoplist{
        display: flex;
        margin: .2667rem 0 .5333rem 0;
        .imgBox{
            width: 2.1333rem;
            height:  2.1333rem;
            margin-right: .2667rem;
            margin-top: .1333rem;
            font-size: 0;
            img{
                border: 1px solid #ccc;
                width: 100%;
                height: 100%;
                border-radius: .1333rem;
            }
        }
        .text{
            flex: 1;
            font-size: .3733rem;
            h2{
                font-size: .5333rem;
                margin-bottom: .2667rem;
            }
            .score{
                margin: .1333rem 0;
                color: orange;
                span:last-child{
                    color:#999;
                    margin-left: .4rem;
                }
            }
            .send{
                display: flex;
                justify-content: space-between;
                font-size: .3733rem;
                color: #999;
                margin: .1333rem 0;
            }
            .evaluation{
                margin: .2667rem 0;
                span{
                    font-size: .32rem;
                    background-color: rgb(254, 234, 195);
                    padding: .08rem .16rem;
                    margin-right:.2667rem;
                    border-radius: .08rem;
                    // opacity: 0.5;
                    color: orangered;
                }
            }
            .coupons{
                display: flex;
                flex-wrap: wrap;
                span{
                    border: 1px solid rgb(249, 175, 175);
                    color: red;
                    padding: .0533rem .1333rem;
                    margin: .1333rem .1333rem 0 0;
                    border-radius: .08rem;
                }
            }
        }
    }

}
.active{
    font-weight: 700;
}
</style>